<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../../dashboard/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    // ,pdata,qdata,,oavgdata,pavgdata,qavgdata 
    setOptions( {xdata,ydata,tdata}  = {}) {
    //   if(null==qavgdata){
    //       qavgdata = 0;
    //   }
    //    if(null==pavgdata){
    //       pavgdata = 0;
    //   }
    //     if(null==oavgdata){
    //       oavgdata = 0;
    //   }
      this.chart.setOption({
        color: ['#F0E68C'],
        title: {
                text: tdata,
                textStyle: {
                fontSize: 15,
                color: "#00FFE3"
                },
                left: '6',
                top: "10"
            },
        grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        formatter: '{a} <br/>{b} : {c}%'
        // formatter: function (params) {
        //     //console.log(params,'params')
        //          return   params[0].name +"<br>"+
        //                   params[0].marker +" "+params[0].seriesName + ': ' + params[0].value + '%'+' '+'平均值'+oavgdata +"<br>"+
        //                   params[1].marker +" "+params[1].seriesName + ': ' + params[1].value + '%'+' '+'平均值'+pavgdata +"<br>"+
        //                   params[2].marker +" "+params[2].seriesName + ': ' + params[2].value + '%'+' '+'平均值'+qavgdata;
		//              // 鼠标移上显示的文字
		//              //1.marker
		//              //2.后边是显示的文字，一定要加[0](如果想知道为啥log一下看看数据console.log(params))
	    //           }
            },
    legend: {
        data: ['牵引车'],
        right: '6',
        top: "10",
        textStyle: {
                fontSize: 15,
                color: "#00FFE3"
                }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            data: xdata
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '差错率',
            type: 'bar',
            // data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            data: ydata,
            // markLine: {
            //     data: [
            //       //  {type: 'average', name: '平均值'}
            //          {
            //            yAxis: oavgdata
            //          }
            //     ]
            //   //   label: {
            //   //   normal: {
            //   //     formatter: oavgdata[0]+'h (基准工时)',             // 这儿设置安全基线
            //   //     position: 'insideEndTop'           
            //   //   }
            //   // }
            // }
        },
    ]
     })
    }
  }
}
</script>
